<template>
<div>
    <Modal title="查看地区" :value="value" @on-cancel="cancel" :mask-closable="false" >
        <area-manager :ref="areaRef" :value="areas" :operateable="false" :selectable="selectable" @on-select="handleOnSelect"></area-manager>

        <div slot="footer">
            <Button @click="cancel">取消</Button>
            <Button @click="save" type="primary">保存</Button>
        </div>
    </Modal>
</div>
</template>
<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase'
import AreaManager from './area-manager.vue'


@Component({
    components: { AreaManager }
})
export default class OrderUpdate extends AbpBase{
    @Prop({type:Boolean,default:false}) value:boolean
    @Prop({type:Boolean,default:false}) selectable:boolean
    @Prop() shippingTemplate:any
    areaRef:string = this.getRandomRef('area-manager')
    get areas() {
        return this.shippingTemplate && this.shippingTemplate.areas ? this.shippingTemplate.areas : [];
    }
    newAreas:Array<string> = []
    async save(){
        let response = await this.post("ShippingTemplate/SetAreas", { id: this.shippingTemplate.id, areas: this.newAreas });
        if(response.success) {
            this.shippingTemplate.areas = this.newAreas;
            this.$emit('save-success');
            this.closeModal();
        }
    }
    handleOnSelect(values) {
        this.newAreas = values;
    }
    cancel(){
        this.closeModal();
    }
    closeModal() {
        //(this.$refs[this.areaRef] as any).clearSelect();
        this.$emit('input', false);
    }
}
</script>